<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
          设置
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item lines="none">
          <ion-label>
            软件版本
          </ion-label>
          <ion-note slot="end">{{ version }}</ion-note>
        </ion-item>
        <ion-item lines="none">
          <ion-label>
            隐私政策
            </ion-label>
            <ion-icon slot="end" :icon="chevronForwardOutline"></ion-icon>
        </ion-item>
        <ion-item lines="none">
          <ion-label>
            服务协议
            </ion-label>
            <ion-icon slot="end" :icon="chevronForwardOutline"></ion-icon>
        </ion-item>
      </ion-list>
      <ion-list>
        <ion-item lines="none" class="btn">
          <ion-label>
            退出登录
            </ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle , IonPage, IonContent, IonList, IonItem, IonInput, IonLabel, IonNote, IonIcon } from '@ionic/vue';
import { reactive, toRefs, onMounted } from 'vue';
import { chevronForwardOutline } from 'ionicons/icons';
import { NativeService } from '@/utils/native-service';
import { getCurrentAppInfo } from '@/utils/app-info';
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle, IonList, IonItem, IonLabel, IonNote, IonIcon
  },
  setup() {
    const nativeService = new NativeService();
    const state = reactive({
      version: '',
    })

    onMounted(async() => {
      state.version = await getCurrentAppInfo();
      nativeService.startLoc().then((res: any) => {
        console.log(res);
      });
    });

    // startLoc

    function selectImg(){
      nativeService.addImgFile((res: any) => {
        console.log(res);
      })
    }
    return {
      ...toRefs(state),
      chevronForwardOutline,
      selectImg
    }
  }
}
</script>
<style lang="scss" scoped>
ion-content{
  --background: #f4f4f4;
  ion-item{
    font-size: 14px;
    color: #333333;
  }
  ion-input{
    font-size: 14px;
    text-align: right;
  }
  ion-list{
    margin-top: 10px;
  }
  .btn{
    text-align: center;
    color: #CA3032;
  }
}
</style>